<template>
  <div>

      <a-form id="components-form-add" :form="form" class="login-form" >
        <a-form-item>
          <a-select
             v-decorator="[
            'parentId',{ rules: [ { required: true, whitespace: true, message: '品类级别必须选择' },] }]"
            showSearch
            optionFilterProp="children"
            :filterOption="filterOption"
            placeholder="请选择品类级别"
          >
            <a-select-option value="0" key="0">一级分类</a-select-option>
            <a-select-option
              v-for="item in categorys"
              :value="item.key"
              :key="item.key"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
          'categoryName',
          { rules: [ { required: true, whitespace: true, message: '分类名称必须输入' },] },
        ]"
            placeholder="分类名"
          ></a-input>
        </a-form-item>
      </a-form>
  </div>
</template>

<script>
export default {
  props: ["categorys"],
  beforeCreate() {
    //初始antd个表单
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  mounted() {
    //向父组件发射一个bindAddForm事件， 将form传给父组件  由父组件来控制表单的验证以及提交
    this.$emit("bindAddForm",this.form)
  },
  methods: {
    //选择框过滤方法
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  }
};
</script>

<style lang="stylus" scoped></style>